<template>
	<view>
		<tn-swipe-action>
		  <tn-swipe-action-item 
			  :options="options1" 
			  v-for="(item,index) in cartList"
			  @btn-click="handleDel(index)"
		  >
			<view class="flex padding" @click.stop>
				<view class="flex align-center">
					<text 
						class="iconfont icon-gouxuan margin-right"
						:class="item.ischeck?'text-yellow':''"
						@click="handleCheck(index)"
					></text>
					<image class="poster margin-right" :src="item.img" mode=""></image>
				</view>
				<view class="flex justify-between info list">
					<view class="">
						{{item.name}}
						<view class="margin-tb-xs">{{item.french}}</view>
						￥{{item.list[item.dropIdx].price}}
					</view>
					<view class="flex flex-direction align-end">
						<view class="edit margin-bottom-xs">
							<text @click="handleEdit(item,index)" class="iconfont icon-bianji"></text>
						</view>
						{{item.list[item.dropIdx].spec}}
						 X 
						{{item.num}}
					</view>
				</view>
			</view>
		  </tn-swipe-action-item>
		</tn-swipe-action>
		<view class="cu-bar foot bg-fff flex">
			<view class="flex flex-sub padding align-center">
				<text 
					class="iconfont icon-gouxuan margin-right-xs"
					:class="allInfo.allCheck?'text-yellow':''"
					@click="handleAllCheck(allInfo.allCheck)"
				></text>
				全选
				<view class="margin-left">
					共计:{{allInfo.total}}
				</view>
			</view>
			<view class="bg-yellow padding text-center color-fff">
				立即结算
			</view>
		</view>
		<cart-pop v-if="popShow"/>
	</view>
</template>

<script>
	import {mapState,mapMutations,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				options1: [
					{
						// 菜单文字
						text: '删除',
						name:'del',
						// 菜单图标TuniaoUI内置图标
						icon: 'delete',
						// 图标大小
						iconSize: 28,
						// 自定义样式配置
						style: {
							// 圆角值
							borderRadius: '0rpx',
							// 背景颜色
							backgroundColor: '#dd5566',
							// 图标、字体颜色
							color: '#FFFFFF',
							// 字体大小
							fontSize: 28,
							// ......
							height:'100%',
							width:'200upx'
						}
					}
				]
			}
		},
		computed: {
			...mapState({
				cartList:state=>state.cart.cartList,
				popShow:state=>state.cart.popShow
			}),
			...mapGetters({
				allInfo:'cart/allInfo'
			})
		},
		methods: {
			...mapMutations({
				handleCheck:'cart/cartCheckMut',
				handleAllCheck:'cart/cartAllCheckMut',
				handleDel:'cart/cartDelMut'
			}),
			handleEdit(item,idx){
				this.$store.commit('cart/editIdxMut',idx)
				this.$store.commit('cart/popDataMut',item)
				this.$store.commit('cart/popShowMut',true)
			
			}
		},
	}
</script>

<style lang="scss">
page{
	padding-bottom: 100upx;
}
.poster{
	width: 180upx;
	height: 180upx;
	background-color: #d8d8d8;
}
.info{
	&.list{
		width: 60%;
	}
	.edit{
		width: 80upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		background-color: #e6e6e6;
		border-radius: 50%;
		
	}
}
.flex.align-end{
	min-width: 210upx;
}
// .icon-gouxuan{
// 	color: #e7e7e7;
// }
.cu-btn.lg{
	width: 50%;
}
.cover-cont{
	position: absolute;
	top: 50%;
	left: 0;
	width: 690upx;
	transform: translateY(-50%);
	border-radius: 10upx;
}
.drop{
	position: relative;
	.drop-list{
		width: 300upx;
		position: absolute;
		top: 60upx;
		right: 0;
		box-shadow: 0 0 10upx 2upx rgba(0,0,0,0.2);
		z-index: 10;
		view:hover{
			background-color: #e6e6e6;
		}
	}
}
.foot{
	bottom: 100upx;
}
</style>
